<template>
  <div class="article-page">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed>
      <!-- 顶部导航作者信息 -->
      <template #title>
        <div class="nav-author" v-show="showNavAuthor">
          <van-image
            round
            width="7vw"
            height="7vw"
            :src="articleDeatil.aut_photo"
          />
          <span class="name">{{ articleDeatil.aut_name }}</span>
          <span class="line">|</span>
          <span
            class="follow"
            @click="followAuthor()"
            :class="{ un: articleDeatil.is_followed }"
            >{{ articleDeatil.is_followed ? '取消关注' : '关注' }}</span
          >
        </div>
      </template>

      <template #right>
        <van-icon name="ellipsis" size="5.4vw"></van-icon>
      </template>
    </van-nav-bar>

    <!-- 骨架组件 -->
    <div v-if="loading" class="article-skeleton">
      <van-skeleton title :row="12" />
    </div>

    <!-- 文章 -->
    <div class="article-wrapper" @scroll="onScroll" ref="wrapper">
      <!-- 头部：标题 时间 作者 -->
      <div class="header" ref="header">
        <h3 class="title">
          {{ articleDeatil.title }}
        </h3>
        <div class="time">
          <span>{{ articleDeatil.pubdate | relativeTime }}</span>
          <span>|</span>
          <span>{{ articleDeatil.read_count }} 阅读</span>
          <span>|</span>
          <span>{{ articleDeatil.comm_count }} 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image
            round
            width="10vw"
            height="10vw"
            :src="articleDeatil.aut_photo"
          />
          <span class="name">{{ articleDeatil.aut_name }}</span>
          <!-- <van-button round size="small" color="#FC6627" @click="followAuthor()">{{
            articleDeatil.is_followed ? '取消关注' : '+关注'
          }}</van-button> -->
          <van-button
            v-if="articleDeatil.is_followed"
            @click="followAuthor()"
            round
            size="small"
            >取消关注</van-button
          >
          <van-button
            v-else
            @click="followAuthor()"
            round
            size="small"
            color="#FC6627"
            >+ 关注</van-button
          >
        </div>
      </div>

      <!-- 内容：文章内容 -->
      <div class="main" ref="main">
        <div class="html" v-html="articleDeatil.content" highlight></div>
        <p v-for="i in 10" :key="i" highlight>
          我会把书籍分成两类,一类是全面型,一类是犀利型.前面介绍了一本全面型的书籍,接下来介绍的这本的特点是非常犀利,这类书籍的特点是作者能找对重点(2/8原则掌握的很好),在重点位置深入挖掘.这本书的作者John
          Resig也是JQuery的作者,他显然是个足够犀利的人儿.JQuery从未承诺解决所有问题,但再一些重点部位的突破,让这个类库如此流行.这本书并没有着重介绍JQuery,还是基于原生的JavaScript和DOM
          <code>console.log('123')</code>
        </p>
        <div class="space"></div>
      </div>

      <!-- 评论：评论组件 -->
      <ArticleComment
        :article="articleDeatil"
        @click-comment="srollToComment"
      ></ArticleComment>
    </div>
  </div>
</template>

<script>
import { getArticleDetailAPI } from '@/api/article'
import { followAuthorAPI } from '@/api/user'
import ArticleComment from './components/article-comment'
export default {
  name: 'ArticlePage',
  components: {
    ArticleComment
  },
  data () {
    return {
      articleDeatil: {}, // 面经详情
      showNavAuthor: false, // 是否显示显示作者信息
      loading: false, // 加载状态
      toComment: false // 是否滚动到评论区
    }
  },
  created () {
    this.getArticleDetail()
  },
  methods: {
    // 获取文章详情
    async getArticleDetail () {
      this.loading = true
      const [, res] = await getArticleDetailAPI(this.$route.query.id)
      // console.log(res)
      this.articleDeatil = res.data.data
      this.$store.commit('article/updateArticle', this.articleDeatil) // 将文章详情设置到仓库
      console.log('文章详情:' + this.articleDeatil)
      this.loading = false
    },
    // 监听滚动事件
    onScroll () {
      const scrollTop = this.$refs.wrapper.scrollTop
      const headerHeight = this.$refs.header.offsetHeight
      // console.log(scrollTop, headerHeight)
      // 当文章滚动距离(scrollTop) 大于头部标题(headerHeight) 高度, 显示导航头作者信息(showNavAuthor = true)
      this.showNavAuthor = scrollTop > headerHeight
    },
    // 关注和取消关注
    async followAuthor () {
      const newStatus = !this.articleDeatil.is_followed
      const [err, res] = await followAuthorAPI(
        this.articleDeatil.aut_id,
        newStatus
      )
      if (err) return this.$toast.fail('操作失败')
      console.log(res)
      this.$toast.success(newStatus ? '关注成功' : '取关成功')
      this.articleDeatil.is_followed = newStatus
    },
    // 滚动到评论区
    srollToComment () {
      const headerHeight = this.$refs.header.offsetHeight
      const mainHeight = this.$refs.main.offsetHeight
      this.toComment = !this.toComment
      // 来回切换
      if (this.toComment) {
        this.$refs.wrapper.scrollTop = headerHeight + mainHeight
      } else {
        this.$refs.wrapper.scrollTop = 0
      }
    }
  }
}
</script>

<style scoped lang="less">
.article-page {
  .article-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 44px 0 50px;
    // 头部
    .header {
      padding: 0 16px;
      .title {
        font-size: 20px;
        font-weight: normal;
        padding: 10px 0;
        margin: 0;
      }
      .time {
        font-size: 12px;
        color: #999;
        span:nth-child(2n) {
          margin: 0 5px;
          color: #ccc;
          position: relative;
          top: -1px;
        }
      }
      .author {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .name {
          flex: 1;
          padding-left: 10px;
          font-size: 16px;
        }
      }
    }
    // 内容
    .main {
      .space {
        height: 16px;
        background: @geek-gray-color;
      }
      .html {
        word-break: break-all;
        width: 100%;
        overflow: hidden;
        padding: 20px 16px;
        /deep/ img {
          max-width: 100%;
          background: #f9f9f9;
        }
        /deep/ pre {
          white-space: pre-wrap;
          code {
            white-space: pre;
          }
        }
      }
    }
  }

  .article-skeleton {
    padding-top: 60px;
  }

  /deep/ .van-nav-bar__title {
    max-width: 270px;
    width: 270px;
  }
  .nav-author {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > span {
      font-size: 14px;
      padding-left: 5px;
    }
    .line {
      color: #ccc;
      position: relative;
      top: -1px;
    }
    .follow {
      color: @geek-color;
      &.un {
        color: #999;
      }
    }
  }
}
</style>
